<template>
  <div id="feedback-detail">
    <!-- 导航栏 -->
    <van-nav-bar @click-left="back" class="navbar">
      <template #left>
        <van-icon name="arrow-left" size="18" color="#f7f8fa" />
      </template>
      <template #title>
        <span name="arrow-left" class="title">反馈详情</span>
      </template>
      <template #right>
        <van-tag type="warning" size="medium">已解决</van-tag>
      </template>
    </van-nav-bar>

      <!-- 表单 -->
      <van-cell-group title="反馈内容">
        <van-cell title="分类">
          <template #label>
            <van-tag type="primary" size="medium" color="#545c80">功能异常</van-tag>
          </template>
        </van-cell>
        <van-cell title="描述">
          <template #label>
            <van-field
              v-model="desc"
              rows="2"
              type="textarea"
              maxlength="100"
              placeholder="暂无描述"
              class="textarea"
              autosize
              readonly
            />
          </template>
        </van-cell>
        <van-cell title="截图">
          <template #label>
            <van-image
              v-for="(image, i) in images"
              width="80"
              height="80"
              :src="image"
              @click="preview(i)"
              class="image"
            />

            <div class="feedback-time">上周</div>
          </template>
        </van-cell>
      </van-cell-group>

    <!-- 客服回复 -->
    <van-cell-group title="客服回复">
      <van-cell :title="reply">
        <template #label>
          <span class="reply-time">刚刚</span>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
  import store from '@/store'
  import Vue from 'vue';
  import { ImagePreview } from 'vant';

  Vue.use(ImagePreview);

  export default {
    name: "FeedbackDetail",
    data() {
      return {
        store: store,
        radio: '1',
        desc: '',
        images: [
          'https://img.yzcdn.cn/vant/leaf.jpg',
          'https://img.yzcdn.cn/vant/leaf.jpg',
          'https://img.yzcdn.cn/vant/leaf.jpg',
          'https://img.yzcdn.cn/vant/leaf.jpg',
          'https://img.yzcdn.cn/vant/leaf.jpg',
        ],
        reply: '系统检测到您有违规操作，账号已被冻结，账号冻结期间 您将不能提交订单',
      };
    },
    methods: {
      preview(index) { // 图片预览
        ImagePreview({
          images: this.images,
          startPosition: index,
        })
      },
      back() {
        // store.state.mine.showPopup = false;
        this.$router.back(-1);
      },
    },
  }
</script>

<style scoped>
  .navbar {
    background-color: #545c80;
  }
  .title {
    color: #f7f8fa;
    font-size: 14px;
  }
  .textarea {
    padding: 0;
  }
  .image {
    margin-right: 5px;
  }
  .feedback-time {
    text-align: right;
    font-size: 12px;
  }
  .reply-time {
    color: #969799;
    font-size: 12px;
    float: right;
  }
</style>
